<template>

  <div class="app-container">
    <el-form
      label-width="120px"
      v-loading="loading"
      element-loading-text="数据加载中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255,255,255, 0.8)"
      v-if="hasPerm('figure.list')"
    >

      <!--查询表单-->
      <!--  -->
      <el-form
        :inline="true"
        class="demo-form-inline"
        label-width="120px"
        v-if="hasPerm('figure.query')"
      >
        <el-form-item>
          <el-input
            v-model="figureQuery.figureName"
            placeholder="人物名"
            clearable
          />
        </el-form-item>

        <el-form-item label="湖南地级市">
          <el-select v-model="figureQuery.city" clearable placeholder="请选择">
            <el-option
              v-for="city in cities"
              :key="city.value"
              :label="city.label"
              :value="city.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-date-picker
            v-model="figureQuery.startTime"
            type="date"
            placeholder="选择开始时间"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="figureQuery.endTime"
            type="date"
            placeholder="选择截止时间"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>

        <el-button
          type="primary"
          icon="el-icon-search"
          @click="pageFigureCondition()"
        >查询
        </el-button
        >
        <el-button type="default" @click="resetData()">清空</el-button>
      </el-form>


      <el-table
        :data="list"
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">

              <el-table
                :data="props.row.children"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                ref="multipleTable">

                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>

                <el-table-column
                  label="地点名"
                  prop="locationTitle">
                </el-table-column>
                <el-table-column
                  label="时间"
                  prop="year">
                </el-table-column>
                <el-table-column
                  label="描述"
                  prop="description">
                </el-table-column>

                <el-table-column
                  label="操作"
                >
                  <template slot-scope="scope">
                    <router-link :to="'/figure/location/' + scope.row.figureId">
                      <el-button type="text" size="small">编辑地点</el-button>
                    </router-link>
                    <el-button @click="deleteLocClick(scope.row.id)" type="text" size="small">删除地点</el-button>
                  </template>
                </el-table-column>

              </el-table>

              <div style="margin-top: 20px">
                <el-button type="danger" @click="deleteSelectLocations">删除选中地点</el-button>
                <el-button @click="toggleSelection">取消选择</el-button>
              </div>

            </el-form>
          </template>
        </el-table-column>

        <el-table-column
          label="人物名"
          prop="figureName">
        </el-table-column>
        <el-table-column
          label="性别">
          <template slot-scope="scope">
            <span v-if="scope.row.sex === 1">男</span>
            <span v-else>女</span>
          </template>
        </el-table-column>

        <el-table-column
          label="出生时间"
          prop="birthday">
        </el-table-column>

        <el-table-column
          label="年龄"
          prop="age">
        </el-table-column>
        <el-table-column
          label="所属城市"
          prop="city">
        </el-table-column>

        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <router-link :to="'/figure/figure/' + scope.row.id">
              <el-button type="text" size="small">编辑信息</el-button>
            </router-link>
            <router-link :to="'/figure/summary/' + scope.row.id">
              <el-button type="text" size="small">编辑总结</el-button>
            </router-link>
            <el-button @click="deleteClick(scope.row.id)" type="text" size="small">删除人物</el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-form>

    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center"
      layout="total, prev, pager, next, jumper"
      @current-change="pageFigureCondition"
    />
  </div>


</template>


<script>
import figure from '@/api/figure/figure'
import figure_location from '@/api/figure/figure_location'
import city from '@/api/option/city'

export default {
  data() {
    return {
      figureQuery: {
        //查询条件封装对象
        figureName: '',
        hometown: '', //籍贯
        locationTitle: '', //经过地
        startTime: '',
        endTime: ''
      },
      list: [], //查询后返回的数据
      page: 1, //当前页
      limit: 10, //每页记录数
      total: 0, //总记录数
      activeNames: [],
      activeKey: 0,
      figureId: '',
      locationId: '',
      loading: true,
      cities: [], //城市
      selectLocations: []
    }
  },
  created() {
    this.getCities()
    this.pageFigureCondition()
  },
  methods: {
    deleteSelectLocations() {
      const ids = []
      this.selectLocations.forEach(item=>{
        ids.push(item.id)
      })
      if(ids.length > 0){
        figure_location.deleteSelectLocations(ids).then(res=>{
          this.$message({
            type: 'success',
            message: res.message
          })
          this.$refs.multipleTable.clearSelection()
          this.pageFigureCondition();
          this.selectLocations = []
        })
      }

    },
    toggleSelection() {
      this.$refs.multipleTable.clearSelection()
    },
    handleSelectionChange(val) {
      this.selectLocations = val
    },
    async deleteLocClick(locationId) {
      const res = await figure_location.deleteFigureLocation(locationId)
      this.$message({
        type: 'success',
        message: res.message
      })
      this.pageFigureCondition()
    },
    //删除历史人物
    async deleteClick(figureId) {
      const res = await figure.deleteFigure(figureId)
      this.$message({
        type: 'success',
        message: res.message
      })
      this.pageFigureCondition()
    },
    // 获得所有的城市列表
    getCities() {
      city.getCities().then((res) => {
        const cities = res.data.cities
        cities.forEach((item) => {
          this.cities.push({
            lable: item.id,
            value: item.city
          })
        })
      })
    },
    //根据条件分页查询
    pageFigureCondition(page = 1) {
      this.page = page
      this.loading = true
      figure
        .pageFigureCondition(this.page, this.limit, this.figureQuery)
        .then((res) => {
          var list = res.data.records
          list.forEach(item => {
            item.children.forEach(it => {
              if (!it.locationTitle) {
                it.locationTitle = '暂无地点名'
              }
            })
          })

          this.list = list
          this.total = res.data.total
          this.loading = false
        })
    },
    //重置数据
    resetData() {
      this.figureQuery = {}
      this.pageFigureCondition()
    }
  }
}
</script>

<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
